<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicBody">
      <!--页头-->
      <el-page-header content="返回全部歌手" title="Back" @back="$router.push('/singer')"
                      style="color: #7d7d7d;margin-top: 20px"></el-page-header>
      <!--主体-->
      <div style="margin-top: 20px;">
        <el-row :gutter="20">
          <el-col :span="16">
            <div>
              <!--头像区域-->
              <div style="display: inline-block;position: relative;">
                <div style=" position: relative; display: inline-block;">
                  <el-image
                    style="width: 180px; height: 180px"
                    :src="singerInfo.imgUrl"
                    fit="fit" placeholder>
                  </el-image>
                </div>
                <div style="position: relative;margin-top: -35px;margin-left: 140px">
                  <el-link :underline="false" @click="likeSinger(singerInfo.singerId)">
                    <div v-if="singerInfo.likeFlag === 0">
                      <i class="iconfont icon-xin"
                         style="color:white;font-size: 25px;opacity: 0.6; background: rgba(11,34,40,0.5);border-radius: 10px"></i>
                    </div>
                    <div v-else>
                      <i class="iconfont icon-xin2"
                         style="color: red;font-size: 25px;opacity: 0.8; background: rgba(11,34,40,0.5);border-radius: 10px"></i>
                    </div>
                  </el-link>
                </div>
              </div>
              <!--介绍区域-->
              <div style="display: inline-block;vertical-align: top;border: 1px;border-radius: 4px">
                <div style="padding: 20px;">
                  <!--歌手名区域-->
                  <el-row>
                    <el-col :span="18"><em style="font-size: 30px" v-text="singerInfo.singerName"></em>
                      <div style="display: inline-block;padding-left: 10px;color: red" v-if="singerInfo.fansCount>1000000">
                        <i class="iconfont icon-zuirehotxiankuang"></i>
                      </div>
                      <div style="display: inline-block;padding-left: 10px;" v-else>
                        <i class="iconfont icon-zuirehotxiankuang"></i>
                      </div>
                    </el-col>
                    <el-col :span="6"><em> 粉丝：{{singerInfo.fansCount}}</em></el-col>
                  </el-row>
                  <div class="textDiv" v-text="singerInfo.intro"></div>
                  <div style="float: right">
                    <el-popover
                      placement="bottom"
                      :width="200"
                      trigger="hover"
                      :content="singerInfo.intro" width="150px">
                      <template #reference>
                        <el-button size="mini">更多介绍<i class="el-icon-arrow-down"></i></el-button>
                      </template>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="similarDiv">
              相似歌手
            </div>
            <div style="padding: 10px">
              <el-link @click="toSingerDetail(similarSingerList[0].id)">
                <el-image
                  style="width: 130px; height: 130px"
                  :src="similarSingerList[0].imgUrl"
                  fit="fit"
                ></el-image>
              </el-link>
              <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
              <el-link @click="toSingerDetail(similarSingerList[1].id)">
                <el-image
                  style="width: 130px; height: 130px"
                  :src="similarSingerList[1].imgUrl"
                  fit="fit"
                ></el-image>
              </el-link>
              <el-divider></el-divider>
            </div>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="单曲" name="first">
            <el-table :data="singerMusicList"
                      style="width: 100%"
                      v-loading="loading"
                      element-loading-text="Loading..."
                      element-loading-svg-view-box="-10, -10, 50, 50">
              <el-table-column prop="audioName" label="歌曲名" width="750"/>
              <el-table-column prop="component">
                <template slot-scope="scope">
                  <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i
                    class="iconfont icon-bofangsanjiaoxing"></i>
                  </el-link>
                  &nbsp;
                  <el-link :underline="false" v-show="true" @click="toPlayMusicComment(scope.$index)"><i
                    class="iconfont icon-xiaoxi"></i></el-link>
                  &nbsp;
                  <el-link :underline="false" v-show="true" @click="likeMusic(scope.$index)">
                    <div v-if="singerMusicList[scope.$index].likeFlag === 1">
                      <i class="iconfont icon-xin2" style="color: red"></i>
                    </div>
                    <div v-else>
                      <i class="iconfont icon-xin"></i>
                    </div>
                  </el-link>
                  &nbsp;
                </template>
              </el-table-column>
              <el-table-column prop="timeLength" label="时长"/>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="专辑" name="second">
            <ul class="singer_album_ul">
              <li class="singer_album_li" v-for="(item,index) in singerAlbumList" :key="index">
                <el-link @click="toSingerAlbum(item)">
                  <el-image
                    class="singer_el_image"
                    :src="item.imgUrl"
                    fit="fit"
                    placeholder
                  ></el-image>
                </el-link>
                <br>
                <span style="width: 150px;height: 22px">
                  <el-link @click="toSingerAlbum(item)" style="height: 21px">
                    {{item.albumName}}
                  </el-link>
                </span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";

  export default {
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    name: "singerDetail",
    data() {
      return {
        activeName: 'first',
        singerInfo: {imgUrl:''},
        singerMusicList: [],
        singerAlbumList: [],
        similarSingerList: [],
        id: 0,
        loading: false,
      }
    },
    created() {
      document.title = '歌手详情';
      this.id = this.$route.query.id;
    },
    mounted() {
      this.getSingerInfo(this.$route.query.id);
      this.getSimilarSinger(this.$route.query.id);
    },
    methods: {
      //跳转歌手详情
      toSingerDetail(id){
        console.log(id);
        this.$router.push({
          path: '/singerDetail',
          query: {
            id:id
          }
        });
        location.reload();
      },
      //随机获取推荐歌手
      getSimilarSinger(id) {
        this.$axios({
          method: 'get',
          url: '/kugou/getSimilarSinger/' + id
        }).then(res => {
          this.similarSingerList = res.data.data.info;
        })
      },
      //跳转到评论
      toPlayMusicComment(index) {
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: this.singerMusicList[index].hash,
            albumId: this.singerMusicList[index].albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //喜欢歌手
      likeSinger(singerId) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeSinger',
            headers: {
              authentication: sessionStorage.getItem("token")
            },
            data: {
              singerId: singerId
            }
          }).then(res => {
            if (res.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.singerInfo.likeFlag === 1) {
                this.singerInfo.likeFlag = 0;
              } else {
                this.singerInfo.likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }

      },
      //添加喜欢歌曲
      likeMusic(res) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeMusic',
            dataType: 'json',
            crossDomain: true,
            headers: {
              authentication: sessionStorage.getItem("token")
            },
            data: {
              hash: this.singerMusicList[res].hash,
              albumId: this.singerMusicList[res].albumId
            }
          }).then(res1 => {
            if (res1.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.singerMusicList[res].likeFlag === 1) {
                this.singerMusicList[res].likeFlag = 0;
              } else {
                this.singerMusicList[res].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          })
        }
      },
      //播放音乐
      toPlayMusic(res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.singerMusicList[res].hash,
            albumId: this.singerMusicList[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.singerMusicList
          }
        }).then(res => {
          window.open(routeUrl.href, '_blank');
        });
      },
      toSingerAlbum(item) {
        console.log(item);
        this.$router.push({
          path: '/singerAlbumDetail',
          query: {
            albumId: item.albumId,
            preId: this.id
          }
        })
      },
      handleClick(tab, event) {
        if (tab.name === 'first') {
          this.findSingerMusic();
        }
        if (tab.name === 'second') {
          this.findSingerAlbum();
        }
      },
      findSingerMusic() {
        this.$axios({
          method: 'get',
          url: '/kugou/singerMusic/' + this.id,
          headers: {
            token: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.singerMusicList = res.data.data.info;
        })
      },
      findSingerAlbum() {
        this.$axios({
          method: 'get',
          url: '/kugou/singerAlbum/' + this.id
        }).then(res => {
          this.singerAlbumList = res.data.data.info;
        })
      },
      getSingerInfo(id) {
        this.loading = true;
        this.$axios({
          method: 'get',
          url: '/kugou/singerDetail/' + id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.singerInfo = res.data.data.info;
          this.findSingerMusic();
        });
        this.loading = false;
      }
    }
  }
</script>

<style scoped>
  .textDiv {
    margin-top: 20px;
    font-size: 14px;
    /*width:440px;*/
    /*height:150px;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    width: 440px;
    line-height: 25px !important;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

  }

  .similarDiv {
    width: 100%;
    padding: 5px;
    background-color: #b8b8b8;
    color: #ffffff;
    font-size: 14px;
  }

  /deep/ .el-divider--vertical {
    display: inline-block;
    width: 24px;
    height: auto;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  .singer_album_ul {
    list-style-type: none
  }

  .singer_album_li {
    width: 150px;
    margin: 0 15px 15px 0;
    float: left;
    text-align: center;
  }

  .singer_el_image {
    width: 100px;
    height: 100px;
  }
</style>
